import { useI18n } from '@/hooks/web/useI18n'
import { reactive, ref } from 'vue'
import { CrudSchema } from '@/hooks/web/useCrudSchemas'
const { t } = useI18n()
import { SchemaConfig } from '@/api/global/types'
import { ElSwitch, ElMessageBox } from 'element-plus'
import { useEventBus } from '@/hooks/event/useEventBus'
import { statusApi } from '@/api/transactionCurrency'
const { emit } = useEventBus()
interface Option {
  label: string
  value: string | number // 具体取决于你的数据
}

const createOptions = (enumObject: { [key: string]: string }): Option[] => {
  return Object.keys(enumObject).map((key) => ({
    label: enumObject[key],
    value: parseInt(key, 10)
  }))
}

export default function (schemaConfig: SchemaConfig | any) {
  const statusOption = reactive(createOptions(schemaConfig?.fieldEnum?.status || {}))
  const crudSchemas = reactive<CrudSchema[]>([
    {
      field: 'selection',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      table: {
        type: 'selection'
      }
    },
    {
      field: 'id',
      label: t('transactionCurrency.id'),
      align: 'center',
      search: {
        hidden: true
      },
      table: {
        hidden: true
      },
      form: {
        hidden: true
      }
    },
    {
      field: 'country',
      label: t('transactionCurrency.country'),
      align: 'center',
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'name',
      label: t('transactionCurrency.name'),
      align: 'center',
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'abbr',
      label: t('transactionCurrency.abbr'),
      align: 'center',
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return data.row.country_value
          }
        }
      }
    },
    {
      field: 'status',
      label: t('transactionCurrency.status'),
      search: {
        component: 'Select',
        componentProps: {
          options: statusOption
        }
      },
      form: {
        component: 'Select',
        componentProps: {
          options: statusOption
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            const originalStatus = data.row.status // 保存原始状态
            const confirmationMessage = data.row.status === 1 ? '确定要关闭吗?' : '确定要开启吗?'
            const handleSwitchChange = () => {
              ElMessageBox.confirm(confirmationMessage, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              })
                .then(async () => {
                  const loading = ref(false)
                  loading.value = true
                  const res = await statusApi({
                    id: data.row.id
                  })
                    .catch(() => {})
                    .finally(() => {
                      loading.value = false
                    })
                  if (res) {
                    emit('getList', 'editor')
                  }
                })
                .catch(() => {
                  data.row.status = originalStatus
                })
            }
            return (
              <ElSwitch
                v-model={data.row.status}
                active-value={1}
                inactive-value={0}
                active-text={statusOption[1].label}
                inactive-text={statusOption[0].label}
                active-color="#13ce66"
                inactive-color="#ff4949"
                onChange={handleSwitchChange}
              ></ElSwitch>
            )
          }
        }
      }
    },
    {
      field: 'action',
      width: '260px',
      label: t('tableDemo.action'),
      fixed: 'right',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return schemaConfig.actionButtonsTemplate?.template(data) ?? null
          }
        }
      }
    }
  ])

  return {
    crudSchemas
  }
}
